﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">

  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <link rel="stylesheet" href="./css/index_active.css">
  <!--[if lt IE 9]>
      <script src="./lib/ie9/html5.min.js"></script>
      <script src="./lib/ie9/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div class="layui-fluid index_contbg">
    <div class="layui-row contPadding">
      <!-- 上半部分 -->
      <div class="indexDataW clearfix">
        <div class="fl indexData_left">
          <!-- 联网单位分布 -->
          <!-- <div class="networkW">
            <span class="title">联网单位分布</span>
            <div class="clearfix networkCont">
              <div class="fl">
                <h4>高危单位</h4>
                <div class="newwork_nums topwork">
                  <span>358455</span>
                  <em>座</em>
                </div>
              </div>
              <div class="fr">
                <h4>重点单位</h4>
                <div class="newwork_nums topwork">
                  <span>35845</span>
                  <em>座</em>
                </div>
              </div>
            </div>
            <div class="clearfix networkCont">
              <div class="fl">
                <h4>一般单位</h4>
                <div class="newwork_nums topwork">
                  <span>358455</span>
                  <em>座</em>
                </div>
              </div>
              <div class="fr">
                <h4>三小场所</h4>
                <div class="newwork_nums topwork">
                  <span>35845</span>
                  <em>座</em>
                </div>
              </div>
            </div>

          </div> -->
          
          <div class="newworkImg">
             <img src="./images/index/tubiao.jpg" alt="">
          </div>
          <!-- 各区县本月报警处理情况 -->
          <div class="alarmClW">
            <span class="title">各区县本月报警处理情况分析</span>
            <div class="listTitle clearfix">
              <span class="spanTitle1">区县</span>
              <span class="spanTitle2"></span>
              <span class="spanTitle3">处理数据</span>
              <span class="spanTitle4">处理率</span>
            </div>
            <ul class="listUl" id="listUl">
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">康保县</span>
                <span class="process">
                  <i class="prcess_bg"></i>
                </span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">张北县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">固原县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">尚义县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">60%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">崇礼县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">赤城县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">宣化县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">阳原县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">蔚县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">怀安县</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">桥东区</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">桥西区</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">60%</span>
              </li>
              <li class="clearfix listTitle listUl_li">
                <span class="spanTitle1">下花园区</span>
                <span class="process"></span>
                <span class="spanTitle3">6000</span>
                <span class="spanTitle4">80%</span>
              </li>
              <!-- 桥东区、桥西区、下花园区 -->
            </ul>
          </div>
        </div>
        <div class="fr indexData_right" id="shanshuoW">
          <!-- 标题 -->
          <h4 class="title">当前报警数量：<span>3</span></h4>
       
          <!-- comments -->
          <div class="baojinContW">
            <div class="baojinNumW">
              <span class="bTitle">烟感报警、高温报警</span>
              <div class="clearfix">
                <div class="fl info">
                  <span>负责人:</span>
                  <em>张峰山</em>
                </div>
                <div class="fr info_right">
                  <span>电话号码:</span>
                  <em>13534200318</em>
                </div>
              </div>
              <div class="address">
                <span>地址：</span>
                <span>河北省张家口市长青路12号</span>
              </div>
            </div>
            <div class="baojinNumW">
              <span class="bTitle">烟感报警、高温报警</span>
              <div class="clearfix">
                <div class="fl info">
                  <span>负责人:</span>
                  <em>温崇新</em>
                </div>
                <div class="fr info_right">
                  <span>电话号码:</span>
                  <em>0313-8185550</em>
                </div>
              </div>
              <div class="address">
                <span>地址：</span>
                <span>张家口市桥东区钻石中路3号</span>
              </div>
            </div>
            <div class="baojinNumW">
              <span class="bTitle">烟感报警</span>
              <div class="clearfix">
                <div class="fl info">
                  <span>负责人:</span>
                  <em>李彪</em>
                </div>
                <div class="fr info_right">
                  <span>电话号码:</span>
                  <em>13760220325</em>
                </div>
              </div>
              <div class="address">
                <span>地址：</span>
                <span>张家口市桥东区碧盛公寓北侧</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下半部分 -->
      <div class="bottomData clearfix">
        <!-- 日常处理数据 -->
        <div class="networkW fl bottomDaily">
          <span class="title">日常处理数据</span>
          <div class="clearfix networkCont">
            <div class="fl">
              <div class="newwork_nums">
                <span>358455</span>
                <em>本月自查企业数</em>
              </div>
            </div>
            <div class="fr">
              <div class="newwork_nums">
                <span>35845</span>
                <em>本月隐患数量</em>
              </div>
            </div>
          </div>
          <div class="clearfix networkCont">
            <div class="fl">
              <div class="newwork_nums">
                <span>358455</span>
                <em>今日巡查企业数</em>
              </div>
            </div>
            <div class="fr">
              <div class="newwork_nums">
                <span>35845</span>
                <em>已整改企业数</em>
              </div>
            </div>
          </div>
        </div>
        <!-- 真实报警和误报 -->
        <div class="networkW fl bottomDaily">
          <span class="title">真实报警和误报</span>
          <div class="clearfix networkCont">
            <div id="mainBing" style="width: 100%;height:176px;"></div>
          </div>
        </div>
        <!-- 警情高发统计时间 -->
        <div class="networkW fl bottomDaily imgnetWork">
          <!-- <span class="title">警情高发统计时间</span>
          <div class="clearfix networkCont">
            <div id="mainCircle" style="width: 100%;height:200px;"></div>
          </div> -->
          <img src="./images/index/three.jpg" alt="">
        </div>
        <!-- 情景态势分析 -->
        <div class="networkW fl bottomDaily imgnetWork">
          <!-- <span class="title">情景态势分析</span>
          <div class="clearfix networkCont" style="width: 100%;height:176px;">
            <div id="mainStatus" style="width: 100%;height:176px;"></div>
          </div> -->
          <img src="./images/index/four.jpg" alt="">
        </div>
        <!-- 报警类别比例分析 -->
        <div class="networkW fl bottomDaily imgnetWork">
          <!-- <span class="title">报警类别比例分析</span> -->
          <div class="clearfix networkCont" style="width: 100%;height:180px;">
            <!-- <div id="mainCircle1" style="width: 100%;height:176px;" style="display: none;"></div> -->
            <!-- 先用图表表示 -->
            <img src="./images/index/five.jpg" alt="">
          </div>
        </div>
      </div>
    </div>

    <!-- 待办清单和客服 -->
    <div class="qingdanW">
      <span class="daiban comIcon" id="daiBanBtn"></span>
      <span class="kefu comIcon"></span>
    </div>
    <!-- 公告查看 -->
    <div class="myNotice">
      <div class="noticeCont">
        <h3>公告查看</h3>
        <ul class="noticeUl">
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="noticeCont">
        <h3>调度任务</h3>
        <ul class="noticeUl">
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <em></em>
              <span>一号工厂报警起火，请注意调动消防人员</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="./lib/layui/layui.js"></script>
  <script type="text/javascript" src="plugins/echarts/index.js"></script>
  <script src="./plugins/jQuery-slimScroll-master/jquery.slimscroll.min.js"></script>
  <script>
    layui.use([], function () {
      $ = layui.jquery;

      // 时间趋势分布图

      // var myChartStuatus = echarts.init(document.getElementById('mainStatus'));
      // var optionStuatus = {
      //   title: {
      //     text: '',
      //     textStyle: {
      //       color: '#32C5FF'
      //     },
      //     subtext: '',
      //     subtextStyle: {
      //       color: 'white'
      //     },
      //     padding: [0, 0, 10, 50]
      //   },
      //   tooltip: {},
      //   legend: {
      //   },
      //   xAxis: {
      //     data: ["12:00", "13:00", "14:00", "15:00", "16:00"]
      //   },
      //   yAxis: {
      //     scale: true,
      //     max: 500,
      //     min: 0,
      //     splitNumber: 5,
      //     axisLine: { //y轴
      //       show: false
      //     },
      //   },
      //   series: [
      //     {
      //       name: '',
      //       type: 'bar',
      //       data: [400, 330, 360, 300, 150, 380],
      //       barWidth: 30,
      //       itemStyle: {    // 图形的形状
      //         normal: {
      //           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//图例使用渐变色
      //             offset: 0,
      //             color: 'rgb(0, 102, 255)'
      //           }, {
      //             offset: 1,
      //             color: 'rgb(0, 153, 255)'
      //           }])
      //         }
      //       }
      //     }, {

      //       name: '',
      //       type: 'line',
      //       //yAxisIndex: 1,
      //       data: [400, 330, 360, 300, 150],
      //       itemStyle: {
      //         color: 'yellow'
      //       }

      //     }
      //   ]
      // };
      // myChartStuatus.setOption(optionStuatus);


      var myChartBing = echarts.init(document.getElementById('mainBing'));
      myChartBing.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',    // 设置图表类型为饼图
            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [          // 数据数组，name 为数据项名称，value 为数据项值
              { value: 74, name: '真实报警' },
              { value: 26, name: '虚假报警' }
            ],
            itemStyle:{
              normal:{
                color:function(params) {
                    //自定义颜色
                    var colorList = ['#32c5ff', '#f7b500'];
                    return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      })



      // var myChartCircle = echarts.init(document.getElementById('mainCircle'));
      // var myChartCircle1 = echarts.init(document.getElementById('mainCircle1'));

      // var optionCircle = {
      //   title: {
      //     text: ' ',
      //     textStyle: {
      //       color: '#32C5FF'
      //     },
      //     subtext: ' ',
      //     subtextStyle: {
      //       color: 'white'
      //     },
      //     padding: [0, 0, 10, 50],
      //   },
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false,
      //     data: [0, 6, 11, 16, 21, 26, 31]
      //   },
      //   yAxis: {
      //     max: 100,
      //     min: 0,
      //     splitNumber: 5,
      //     axisLine: { //y轴
      //       show: false
      //     }
      //   },
      //   series: [{
      //     name: name,
      //     type: 'line',
      //     smooth: true,
      //     sampling: 'average',
      //     areaStyle: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: 'rgba(160, 214, 196,.6)'
      //       }, {
      //         offset: 1,
      //         color: '#fff'
      //       }])
      //     },
      //     data: [60, 80, 42, 70, 58, 62, 20],
      //   }]
      // };
      // var optionCircle1 = {
      //   title: {
      //     text: '',
      //     textStyle: {
      //       color: '#32C5FF'
      //     },
      //     subtext: '',
      //     subtextStyle: {
      //       color: 'white'
      //     },
      //     padding: [0, 0, 10, 50],
      //   },
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false,
      //     data: [0, 6, 11, 16, 21, 26, 31]
      //   },
      //   yAxis: {
      //     max: 100,
      //     min: 0,
      //     splitNumber: 5,
      //   },
      //   series: [{
      //     name: name,
      //     type: 'line',
      //     smooth: true,
      //     sampling: 'average',
      //     areaStyle: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: 'rgba(120, 114, 16,.6)'
      //       }, {
      //         offset: 1,
      //         color: '#fff'
      //       }])
      //     },
      //     data: [60, 80, 42, 70, 58, 62, 20],
      //   }]
      // };

      // myChartCircle.setOption(optionCircle);
      // myChartCircle1.setOption(optionCircle1);


      /***************  自定义滚动条  ****************/
      $('#listUl').slimScroll({
        height: '200px',
        wheelStep: 20
      });

      /********* 公告查看 **********/
      var publicLookFn = (function () {
        var myNotice = $('.myNotice');
        var comLi = myNotice.find('li');
        $('#daiBanBtn').click(function (e) {
          e.stopPropagation();
          $('.myNotice').css({
            right: 46
          });
        });
        myNotice.click(function (e) {
          e.stopPropagation();
        });

        // comLi.each(function (i) {
        //   $(this).click(function () {
        //     myNotice.css({
        //       right: '-375px'
        //     });
        //   })
        // });
        $(document).click(function (e) {
          myNotice.css({
            right: '-375px'
          });
        })
      })();


      /*****隔一段时间出来******/
      var shanshuoW = $('#shanshuoW');
      var time = null;
      var jkTime = null;
      var num = 5;

      

      runShow();
      function runShow() {
         shanshuoW.addClass('slide-left');
         jkTime = setInterval(function () {
            num --;
            if (num <= 1) {
              shanshuoW.removeClass('slide-left');
              clearInterval(jkTime);
              num = 3;
              
            }else{
              runShow();
            }
          }, 2000);
      }


    })
  </script>
</body>

</html>